<template>
  <div>
    <button @click="toggleOuter">Toggle Outer</button>
    <transition name="outer">
      <div v-if="outerShow" class="outer">
        Outer Container
        <button @click="toggleInner">Toggle Inner</button>
        <transition name="inner">
          <div v-if="innerShow" class="inner">
            Inner Container
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      outerShow: false,
      innerShow: false
    };
  },
  methods: {
    toggleOuter() {
      this.outerShow = !this.outerShow;
    },
    toggleInner() {
      this.innerShow = !this.innerShow
    }
  }
}
</script>
<style scoped>
.outer-enter-active,
.outer-leave-active {
  transition: all 0.5s;
}

.outer-enter,
.outer-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.outer {
  padding: 10px;
  background-color: #eaeaea;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.inner-enter-active,
.inner-leave-active {
  transition: all 0.5s
}

.inner-enter,
.inner-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.inner {
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}
</style>